import * as echarts from 'echarts'
import { useEffect, useRef } from 'react';

const BarChart = ({title,ydata}) => {
  const chartRef = useRef(null)
  useEffect(() => {
    // 保证dom可用，再渲染图表
    // 获取渲染图表的dom 节点
  const chartDom = chartRef.current
  // 图表初始化：生成图表实例对象
  const myChart = echarts.init(chartDom);
  // 准备图表参数
  const option = {
    title:{
      text:title
    },
    xAxis: {
      type: 'category',
      data: ['VUe','React','Angular']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: ydata,
        type: 'bar'
      }
    ]
  };
  option && myChart.setOption(option)
  // 清理函数，组件卸载时执行
  return () => {
    // 销毁图表实例，释放内存
    myChart.dispose()
  }
  },[])
  return(
    <div ref={chartRef} style={{width:'500px',height:'400px'}}></div>
  )
}

export default BarChart